// 加载屏幕大小
const _DEFAULT_PRELOAD = 1.3

//  默认加载失败了重新加载
const _DEFAULT_ERROR_RELOAD = false

// 最大重新加载次数
const MAX_RELOAD_TOTAL = 5


import { imageLoad  } from './utils'


export class LazyImage {
    constructor({ el, src, options, imgRender} = {}) {
        // 当前img元素
        this.el = el;

        // 图片地址
        this.src = src;

        // 父类的配置信息
        this.options = options;

        // 渲染图片，来源于父类
        this.imgRender = imgRender;

        // 是否已经加载完毕
        this.loaded = false;
        
        // 加载几种状态
        this.state = {
            loading: false,
            error: false,
            finish: false,
        }
    }

    /**
     * 当期图片是否出现在可视区域
     * @return {Boolean} visibleState
     */
    checkeIsVisible() {
        const { top  } = this.el.getBoundingClientRect();
        return top <  window.innerHeight * (this.options.preload || _DEFAULT_PRELOAD)
    }

    /**
     * 加载图片
     * @param {Boolean} isReload
     */
    loadImg(isReload) {
        if (isReload) {
            this.reloadCount++

            // 如果重新加载次数大于最大次数，则不加载，状态改为error
            if (this.reloadCount >= MAX_RELOAD_TOTAL) {
                this.loaded = true
                
                // 状态改为Error状态
                this.imgRender(this, 'error')
            }
        }

        // 1.初始化加载loading
        this.imgRender(this, 'loading')

        // 2.加载图片
        imageLoad(this.src).then(res => {
            this.loading = true;
            this.imgRender(this, 'ok')
            this.loaded = true
        }).catch(err => {
            console.log(err)
            // 状态改为Error状态
            this.imgRender(this, 'error')
            
            const errorReload = this.options.errorReload || _DEFAULT_ERROR_RELOAD

            // 是否需要重新加载
            if (errorReload) {
                this.loadImg()
            }
        })
        
    }
}